import React from "react";
import "./Header.css";
import { Link, NavLink } from "react-router-dom";

const Header = () => {
    return (
        <div className="header-wrap">
            <div className="header">
                <img
                    className="logo"
                    src="https://static2.cnodejs.org/public/images/cnodejs_light.svg"
                    alt="123"
                />
                <div className="nav">
                    <NavLink exact activeStyle={{ color: "red" }} to="/">
                        首页
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/new">
                        新手入门
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/api">
                        API
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/login">
                        登录
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/user">
                        个人中心
                    </NavLink>
                    <NavLink activeStyle={{ color: "red" }} to="/collect">
                        收藏
                    </NavLink>
                    <NavLink
                        activeStyle={{ color: "red" }}
                        to={{ pathname: "/lisi", state: { id: 100 } }}
                    >
                        url
                    </NavLink>
                    {/* <Link to="/">首页</Link>
                    <Link to="/new">新手入门</Link>
                    <Link to="/api">API</Link>
                    <Link to="/login">登录</Link>
                    <Link to="/zhangsan">用户</Link>
                    <Link to={{ pathname: "/lisi", state: { id: 100 } }}>url</Link> */}
                </div>
            </div>
        </div>
    );
};

export default Header;
